<!-- 机械部分 -->
<template>
  <div class="HomeContent">
    <div class="container">
      <div class="IconLeft">
        <div class="Mechanics16">
          <div class="Mechanics16Float">
            <div class="Mechanics16Name">租赁类型</div>
            <div class="HeightStyle"></div>
          </div>
          <div class="Mechanics16FooterName">
            <div class="footerNameBox" @click="toNavBar()">
              <div >查看更多</div>
              <img
                src="./../../../../public/img/home/rightIcon.png"
                class="Icon16"
              />
            </div>
            <div class="heightStyle1"></div>
          </div>
        </div>
        <div class="MechanicsContent">
          <div class="MechanicsBox">
            <router-link :to="{name:'MechanicsInfoData',query:{idx:3,currentIndex:2}}" target="_blank">
            <div
              class="Mechanics1"
            >
              <div class="Mechanics1Top">
                <div class="Mechanics1TopName">铲运机械</div>
                <p class="Mechanics1TopInfo">装载机械类型租赁专区</p>
              </div>
              <div class="Mechanics1Bom">
                <img src="./../../../../public/img/home/1.png" class="Icon1" />
              </div>
            </div>
            </router-link>
            <router-link :to="{name:'MechanicsInfoData',query:{idx:2,currentIndex:2}}" target="_blank">
            <div
              class="Mechanics10One"
            >
              <div class="Mechanics10Left">
                <div class="Mechanics10LeftName">起重机械</div>
                <p class="Mechanics10LeftInfo">起重机械类型租赁专区</p>
              </div>
              <div class="Mechanics10Right">
                <img
                  src="./../../../../public/img/home/10.png"
                  class="Icon10"
                />
              </div>
            </div>
            </router-link>
          </div>
          <div class="MechanicsBox1">
            <router-link :to="{name:'MechanicsInfoData',query:{idx:1,currentIndex:2}}" target="_blank">
            <div
              class="Mechanics10One"
            >
              <div class="Mechanics10Left">
                <div class="Mechanics10LeftName">挖掘机械</div>
                <p class="Mechanics10LeftInfo">挖掘机械类型租赁专区</p>
              </div>
              <div class="Mechanics10RightOne">
                <img
                  src="./../../../../public/img/home/15.png"
                  class="Icon15"
                />
              </div>
            </div>
            </router-link>
            <router-link :to="{name:'MechanicsInfoData',query:{idx:4,currentIndex:2}}" target="_blank">
            <div
              class="Mechanics1"
            >
              <div class="Mechanics1Top">
                <div class="Mechanics1TopName">桩工机械</div>
                <p class="Mechanics1TopInfo">打桩机械类型租赁专区</p>
              </div>
              <div class="Mechanics1BomOne">
                <img
                  src="./../../../../public/img/home/11.png"
                  class="Icon11"
                />
              </div>
            </div>
            </router-link>
          </div>
        </div>
      </div>
      <div class="IconRight">
        <router-link :to="{name:'MechanicsInfoData',query:{idx:5,currentIndex:2}}" target="_blank">
        <div
          class="IconRight1"
        >
          <div class="IconRight1Box">
            <div class="IconRight1Title">路面机械</div>
            <p class="IconRight1Info">路面机械类型租赁专区</p>
          </div>
          <img src="./../../../../public/img/home/13.png" class="rightIcon1" />
        </div>
        </router-link>
        <router-link :to="{name:'MechanicsInfoData',query:{idx:7,currentIndex:2}}" target="_blank">
        <div
          class="IconRight1"
        >
          <div class="IconRight1Box">
            <div class="IconRight1Title">混凝土机械</div>
            <p class="IconRight1Info">混凝土机械类型租赁专区</p>
          </div>
          <img src="./../../../../public/img/home/12.png" class="rightIcon2" />
        </div>
        </router-link>
        <router-link :to="{name:'MechanicsInfoData',query:{idx:8,currentIndex:2}}" target="_blank">
        <div
          class="IconRight1"
        >
          <div class="IconRight1Box">
            <div class="IconRight1Title">隧道机械</div>
            <p class="IconRight1Info">隧道机械类型租赁专区</p>
          </div>
          <img src="./../../../../public/img/home/4.png" class="rightIcon3" />
        </div>
        </router-link>
        <router-link :to="{name:'MechanicsInfoData',query:{idx:9,currentIndex:2}}" target="_blank">
        <div
          class="IconRight1"
        >
          <div class="IconRight1Box">
            <div class="IconRight1Title">自卸车</div>
            <p class="IconRight1Info">自卸车类型租赁专区</p>
          </div>
          <img src="./../../../../public/img/home/3.png" class="rightIcon4" />
        </div>
        </router-link>
      </div>
      <div class="bottomBox">
        <div class="bottomTitle" @click="toNavBar()">查看更多</div>
        <img
          src="./../../../../public/img/home/rightImg.png"
          class="rightImg"
          @click="toNavBar()"
        />
      </div>
    </div>
  </div>
</template>

<script >
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return {};
  },
  // 过滤器
  filters: {},
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
     toNavBar(idx){
      const {href} = this.$router.resolve({
        path:'/mechanicsInfoData',
        query:{idx,currentIndex:2}
      })
      window.open(href, '_blank')
    },
    goMechanicalReservation(){
      const {href} = this.$router.resolve({
      path:'/mechanicalReservation',
      query:{num:1}
    })
      window.open(href, '_blank')
    },
    goMechanicas(type_id){
      this.$router.push({path:'/mechanicalReservation',query:{type_id:type_id}})
    } 
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  ctivated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang='scss' scoped>
.HomeContent {
  width: 1180px;
}
.container {
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.IconLeft {
  display: flex;
  justify-content: center;
}
.IconRight {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.Mechanics16 {
  background: url("./../../../../public/img/home/16.png") no-repeat;
  background-size: 100%, 100%;
  width: 280px;
  height: 412px;
  position: relative;
  margin-right: 21px;
  cursor: pointer;
}
.Mechanics16Float {
  position: absolute;
  top: 50px;
  left: 30px;
}
.Mechanics16Name {
  font-size: 26px;
  color: #fff;
}
.HeightStyle {
  width: 28px;
  height: 3px;
  background: #fff;
  margin-top: 11px;
}
.Icon16 {
  width: 37px;
  height: 11px;
  margin-left: 10px;
}
.Mechanics16FooterName {
  position: absolute;
  bottom: 50px;
  left: 30px;
}
.MechanicsContent {
  display: flex;
  flex-direction: column;
}
.MechanicsBox {
  display: flex;
}
.MechanicsBox1 {
  display: flex;
  margin-top: 20px;
}
.footerNameBox {
  font-size: 16px;
  color: #fff;
  display: flex;
  align-items: center;
}
.heightStyle1 {
  width: 109px;
  height: 1px;
  background: #fff;
  margin-top: 8px;
}
.Mechanics1 {
  width: 279px;
  height: 196px;
  background: linear-gradient(137deg, #ffffff 0%, #f6f7f4 100%);
  border-radius: 4px;
  position: relative;
  margin-right: 21px;
  cursor: pointer;
  transition: all 0.5s;
}
.Mechanics1:hover {
  background: #fff3ee;
  width: 279px;
  height: 196px;
  border-radius: 4px;
  position: relative;
  margin-right: 21px;
  transition: 0.5s all ease-in;
  transform: scale(1.03); /*以y轴为中心旋转*/
  cursor: pointer;
}
.Mechanics1Top {
  position: absolute;
  top: 30px;
  left: 30px;
}
.Mechanics1TopName {
  font-size: 18px;
  color: #333;
  font-weight: 500;
}
.Mechanics1TopInfo {
  font-size: 14px;
  color: #999;
  margin-top: 4px;
}
.Mechanics1Bom {
  position: absolute;
  right: 19px;
  bottom: 5px;
}
.Mechanics1BomOne {
  position: absolute;
  right: 11px;
  bottom: 4px;
}
.Icon1 {
  width: 167px;
  height: 98px;
}
.Mechanics10 {
  width: 580px;
  height: 196px;
  background: linear-gradient(135deg, #f9f9f9 0%, #faf4f0 100%);
  border-radius: 4px;
  position: relative;
  cursor: pointer;
}
.Mechanics10One {
  width: 580px;
  height: 196px;
  background: linear-gradient(135deg, #f9f9f9 0%, #faf4f0 100%);
  border-radius: 4px;
  margin-right: 21px;
  position: relative;
  cursor: pointer;
  transition: all 0.5s;
}
.Mechanics10One:hover {
  background: #fff3ee;
  opacity: 0.7;
  width: 580px;
  height: 196px;
  border-radius: 4px;
  position: relative;
  margin-right: 21px;
  transition: 0.5s all ease-in;
  transform: scale(1.03); /*以y轴为中心旋转*/
  cursor: pointer;
}
.Mechanics10Left {
  position: absolute;
  top: 78px;
  left: 90px;
}
.Mechanics10Right {
  position: absolute;
  top: 37px;
  right: 30px;
}
.Mechanics10RightOne {
  position: absolute;
  top: 22px;
  right: 50px;
}
.Icon10 {
  width: 260px;
  height: 126px;
}
.Mechanics10LeftName {
  font-size: 18px;
  color: #333;
  font-weight: 500;
}
.Mechanics10LeftInfo {
  font-size: 14px;
  color: #999;
}
.Icon15 {
  width: 200px;
  height: 165px;
}
.Icon11 {
  width: 157px;
  height: 106px;
}
.IconRight1 {
  width: 280px;
  height: 196px;
  background: linear-gradient(137deg, #ffffff 0%, #f6f7f4 100%);
  border-radius: 4px;
  position: relative;
  margin-right: 20px;
  cursor: pointer;
  transition: all 0.5s;
}
.IconRight1:hover {
  width: 280px;
  height: 196px;
  background: #fff3ee;
  border-radius: 4px;
  position: relative;
  margin-right: 20px;
  cursor: pointer;
  transition: 0.5s all ease-in;
  transform: scale(1.03); /*以y轴为中心旋转*/
}
.IconRight1Box {
  position: absolute;
  top: 30px;
  left: 30px;
}
.IconRight1Title {
  font-size: 18px;
  color: #333;
}
.IconRight1Info {
  font-size: 14px;
  color: #999;
}
.rightIcon1 {
  width: 156px;
  height: 110px;
  position: absolute;
  bottom: 3px;
  right: 20px;
}
.rightIcon2 {
  width: 165px;
  height: 91px;
  position: absolute;
  bottom: 17px;
  right: 30px;
}
.rightIcon3 {
  width: 190px;
  height: 85px;
  position: absolute;
  bottom: 28px;
  right: 8px;
}
.rightIcon4 {
  width: 122px;
  height: 84px;
  position: absolute;
  bottom: 17px;
  right: 21px;
}
.IconRight2 {
  width: 280px;
  height: 196px;
  background: linear-gradient(137deg, #ffffff 0%, #f6f7f4 100%);
  border-radius: 4px;
}
.bottomBox {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  cursor: pointer;
}
.bottomTitle {
  font-size: 16px;
  color: #333;
}
.rightImg {
  width: 18px;
  height: 18px;
}
</style>
